<template>
  <div class="review-page">
    <header class="header">
      <div class="header-content">
        <div class="logo" @click="$router.push('/home')">商城</div>
        <div class="user-actions">
          <span class="cart-icon" @click="$router.push('/cart')">🛒</span>
          <span class="user-icon">👤</span>
        </div>
      </div>
    </header>

    <main class="review-content">
      <div class="product-info">
        <img :src="product.image" :alt="product.name">
        <div class="info">
          <div class="product-brand">{{ product.brand }}</div>
          <h1 class="product-name">{{ product.name }}</h1>
          <div class="product-price">¥{{ product.price }}</div>
        </div>
      </div>

      <review-list :product-id="Number(route.params.id)" ref="reviewList" />

      <div class="review-form">
        <h2>商品评价</h2>
        <div class="rating">
          <span>评分：</span>
          <div class="stars">
            <span
              v-for="n in 5"
              :key="n"
              class="star"
              :class="{ active: n <= rating }"
              @click="rating = n"
            >
              ⭐
            </span>
          </div>
        </div>

        <div class="comment">
          <label>评价内容：</label>
          <textarea
            v-model="comment"
            placeholder="请分享您对这个商品的使用体验..."
            rows="4"
          ></textarea>
        </div>

        <div class="image-upload">
          <label>上传图片：</label>
          <div class="upload-area">
            <div
              v-for="(img, index) in images"
              :key="index"
              class="image-preview"
            >
              <img :src="img">
              <button class="remove-img" @click="removeImage(index)">×</button>
            </div>
            <button
              v-if="images.length < 5"
              class="upload-btn"
              @click="triggerUpload"
            >
              + 添加图片
            </button>
            <input
              type="file"
              ref="fileInput"
              style="display: none"
              accept="image/*"
              @change="onFileChange"
            >
          </div>
          <div class="upload-tip">最多上传5张图片</div>
        </div>

        <div class="actions">
          <button class="submit-btn" @click="submitReview">提交评价</button>
          <button class="cancel-btn" @click="$router.push('/home')">取消</button>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { ref, onBeforeMount, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import jinzhanhuaImg from '../assets/products/jinzhanhua.png'
import cpbImg from '../assets/products/CPB.png'
import nb530Img from '../assets/products/nb530.png'
import kiehlsmaskImg from '../assets/products/kiehlsmask.png'
import cpblotionImg from '../assets/products/cpblotion.png'
import dovechocolateImg from '../assets/products/dovechocolate.png'
import clarinsImg from '../assets/products/clarins.png'
import givenchyImg from '../assets/products/givenchy.png'
import ReviewList from '../components/ReviewList.vue'

export default {
  name: 'ReviewView',
  components: {
    ReviewList
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const { proxy } = getCurrentInstance()
    const rating = ref(5)
    const comment = ref('')
    const images = ref([])
    const fileInput = ref(null)
    const product = ref(null)
    const imageMap = {
      '@/assets/products/jinzhanhua.png': jinzhanhuaImg,
      '@/assets/products/CPB.png': cpbImg,
      '@/assets/products/nb530.png': nb530Img,
      '@/assets/products/kiehlsmask.png': kiehlsmaskImg,
      '@/assets/products/cpblotion.png': cpblotionImg,
      '@/assets/products/dovechocolate.png': dovechocolateImg,
      '@/assets/products/clarins.png': clarinsImg,
      '@/assets/products/givenchy.png': givenchyImg
    }

    onBeforeMount(() => {
      // 从localStorage获取商品数据
      const products = JSON.parse(localStorage.getItem('products') || '[]')
      const foundProduct = products.find(p => p.id === Number(route.params.id))
      if (foundProduct) {
        product.value = {
          ...foundProduct,
          image: imageMap[foundProduct.image] || foundProduct.image
        }
      }
      if (!product.value) {
        router.push('/home')
      }
    })

    const triggerUpload = () => {
      fileInput.value.click()
    }

    const onFileChange = (e) => {
      const file = e.target.files[0]
      if (file) {
        const reader = new FileReader()
        reader.onload = (e) => {
          images.value.push(e.target.result)
        }
        reader.readAsDataURL(file)
      }
    }

    const removeImage = (index) => {
      images.value.splice(index, 1)
    }

    const submitReview = () => {
      if (!comment.value.trim()) {
        alert('请填写评价内容')
        return
      }

      // 保存评价数据
      const review = {
        productId: product.value.id,
        rating: rating.value,
        comment: comment.value,
        images: images.value,
        date: new Date().toISOString()
      }

      const reviews = JSON.parse(localStorage.getItem('reviews') || '[]')
      reviews.push(review)
      localStorage.setItem('reviews', JSON.stringify(reviews))

      // 刷新评价列表
      if (proxy.$refs.reviewList) {
        proxy.$refs.reviewList.loadReviews()
      }

      alert('评价提交成功！')
      // 清空表单
      comment.value = ''
      images.value = []
      rating.value = 5
    }

    return {
      product,
      rating,
      comment,
      images,
      fileInput,
      triggerUpload,
      onFileChange,
      removeImage,
      submitReview,
      route
    }
  }
}
</script>

<style scoped>
.review-page {
  min-height: 100vh;
  background: #f7f8fa;
}

.header {
  background: white;
  padding: 15px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #5468ff;
  cursor: pointer;
}

.user-actions {
  display: flex;
  gap: 20px;
  font-size: 24px;
}

.review-content {
  max-width: 800px;
  margin: 30px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-info {
  background: white;
  padding: 20px;
  border-radius: 12px;
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.product-info img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: #f8f9fd;
  border-radius: 8px;
}

.info {
  flex: 1;
}

.product-brand {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.product-name {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.product-price {
  color: #5468ff;
  font-weight: 500;
}

.review-form {
  background: white;
  padding: 30px;
  border-radius: 12px;
}

.review-form h2 {
  margin-bottom: 30px;
  color: #333;
}

.rating {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stars {
  display: flex;
  gap: 5px;
}

.star {
  cursor: pointer;
  opacity: 0.3;
  transition: all 0.2s;
}

.star.active {
  opacity: 1;
}

.comment {
  margin-bottom: 20px;
}

.comment label {
  display: block;
  margin-bottom: 10px;
  color: #333;
}

textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  resize: vertical;
  font-size: 14px;
}

.image-upload {
  margin-bottom: 30px;
}

.image-upload label {
  display: block;
  margin-bottom: 10px;
  color: #333;
}

.upload-area {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.image-preview {
  width: 100px;
  height: 100px;
  position: relative;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.remove-img {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}

.upload-btn {
  width: 100px;
  height: 100px;
  border: 2px dashed #ddd;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  color: #666;
}

.upload-tip {
  margin-top: 10px;
  color: #999;
  font-size: 12px;
}

.actions {
  display: flex;
  gap: 20px;
}

.submit-btn,
.cancel-btn {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn {
  background: #5468ff;
  color: white;
}

.submit-btn:hover {
  background: #4a5aff;
}

.cancel-btn {
  background: #f8f9fd;
  color: #666;
  border: 1px solid #ddd;
}

.cancel-btn:hover {
  background: #fff;
  border-color: #5468ff;
  color: #5468ff;
}

@media (max-width: 768px) {
  .product-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .actions {
    flex-direction: column;
  }
}
</style> 